<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		 *{
		 	padding: 0;
		 	margin: 0;
		 }
		 /*  1.像素px */
		 div{
		 	/*width: 200px;*/
		 }
		 /*  2.vw vh :占窗口的百分比
		          vw: view width  1vw=视口宽度的1%  100vw就是整个视口的宽度
		          vh: view height 1vh=视口高度的1%
		          		  */
		 div{
		 	/*width: 100vw;
		 	height: 100vh;*/
		 	background-color: pink;
		 }
		 /*  3.父元素的百分比 % 
		         设置全屏：需要给父元素设置一个高度，在div里，他的父元素是body,body的父元素是html,html的父元素是浏览器窗口,所以需要给body、html、设置继承父元素的高度*/
		 html{
		 	height: 100%;
		 }
		 body{
		 	height: 100%;
		 }
		 div{
		 	width: 100%;
		 	height: 100%;
		 	background-color: red;
		 }
	</style>
</head>
<body>
     <div></div>
</body>
</html>